<template>
	<view class="content">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="list" v-for="(item,i) in list" :key="i" @click="goTo('serviceDetail?id='+item.id)">
			<view class="li row">
				<view class="tit">服务类型：</view>
				<view class="txt fill flex">{{item.serviceTypeName}}</view>
			</view>
			<view class="li row">
				<view class="tit">创建时间：</view>
				<view class="txt fill">{{$filters.formatDate(item.createTime)}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务说明：</view>
				<view class="txt fill over-hidden">{{item.content}}</view>
			</view>
			<view class="li row">
				<view class="tit">开始时间：</view>
				<view class="txt fill">{{$filters.formatDate(item.serviceTimeStart)}}</view>
			</view>
			<view class="li row">
				<view class="tit">结束时间：</view>
				<view class="txt fill">{{$filters.formatDate(item.serviceTimeEnd)}}</view>
			</view>
			<view class="li row" v-if="item.status==2">
				<view class="tit">服务评价：</view>
				<view class="txt fill gray" v-if="item.evaluatedOrNot">评价内容</view>
				<view class="txt fill yellow" v-else @click.stop="goTo('serviceAppraise?id='+item.id)">去评价</view>
			</view>
			<view class="status" :class="item.status==1?'in':item.status==2?'ok':''">{{item.statusName}}</view>
		</view>
		</mescroll-body>
		<view class="btn-primary" @click="goTo('serviceApply')">申请服务</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onShow, onPageScroll, onReachBottom } from "@dcloudio/uni-app"
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { swoTicketPage } from '@/common/API/bpm'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
import { getDictData } from '@/common/API/system'

onLoad(()=>{
	getTypeList()
})
onShow(()=>{
	// setTimeout(()=>{
		resetScroll()
	// },1000)
})
const typeList = ref<any>([])
const getTypeList = async ()=>{
	let res = await getDictData({
		pageNo: 1,
		pageSize: 10,
		dictType: 'workorder_type'
	})
	typeList.value.push(res.list)
}

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		customerMobile: uni.getStorageSync('userPhone')
	}
	let res = await swoTicketPage(data)
	res.list = res.list.map((item)=>{
		return{
			...item,
			serviceTypeName: typeList.value[0].find((v)=>v.value==item.serviceType)?.label
		}
	})
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) list.value = [];
	list.value = list.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}

const goTo = (url)=>{
	uni.navigateTo({
		url: url
	})
}
</script>

<style lang="scss" scoped>
.content{
	padding: 28rpx 0 100rpx;
	background: #fff;
	.list{
		border-radius: 16rpx;
		margin: 0 auto 24rpx;
		padding: 32rpx;
		position: relative;
		overflow: hidden;
		width: 686rpx;
		box-shadow: 0 4rpx 32rpx rgba(0, 0, 0, 0.05);
		.li{
			.tit{
				width: 150rpx;
				margin-right: 10rpx;
				color: #999;
			}
			.txt{
				color: #000;
			}
			.over-hidden{
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.status{
				color: #666;
			}
		}
		.status{
			width: 90px;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			position: relative;
			background: #666;
			color: #fff;
			font-size: 24rpx;
			position: absolute;
			top: 10px;
			right: -26px;
			transform: rotate(45deg);
			&.not{
				background: #F8534B;
			}
			&.in{
				background: $uni-color-primary;
				color: #fff;
			}
			&.ok{
				background: #39BF6F;
				color: #fff;
			}
		}
	}
	.btn-primary{
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 40rpx;
		border-radius: 0;
		z-index: 9;
		border-radius: 200rpx;
	}
}
</style>
